<template>
  <div class="cart">
    <div class="heaer fixedTop">购物车<span @click="editBtnclick">{{isEdit ? '完成' : '编辑'}}</span></div>
    <!-- 没有商品的状态 -->
    <div v-if="!cartInfo" class="noGoods">
      <div class="emptyArea">
        <img class="emptyImg" src="../../../../static/images/new-cart-empty.png" />
        <div class="emptyText">您的购物车没有商品</div>
        <div class="goBuyBtn">去购物</div>
      </div>
      <div class="hotArea">
        <div class="title">热销推荐</div>
        <div class="goodsList">
          <div class="item" v-for="item in products" :key="item.prdId">
            <img class="mainImg" :src="'https://res.vmallres.com/pimages' + item.photoPath + '428_428_' + item.photoName" />
            <img class="addToCart" src="../../../../static/images/addToCart.png" />
            <div class="name">{{item.displayName}}</div>
            <div class="price">¥{{item.promPrice}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 有商品的状态 -->
    <div v-else class="hasGoods">
      <div class="goodsItem" v-for="(item,index) in cartInfo.itemInfos" :key="item.skuId">
        <div class="left">
          <!-- <div class="checkbox" :class="[item.selected ? 'active' : '']" @click="checkBoxClick(index,item.skuId)"></div> -->
          <CheckBox :selected="item.selected" @checkBoxChange="checkBoxChange($event,'goods',index,item.skuId)" />
          <img :src="'https://res.vmallres.com/pimages' + item.sbom.photoPath + '428_428_' + item.sbom.photoName" />
        </div>
        <div class="right">
          <div class="name">{{item.itemName}}</div>
          <div class="sku">
            <span v-for="item in item.sbom.skuAttrValues" :key="item.attrCode">{{item.attrValue}}<label>,</label></span>
          </div>
          <div class="promotion">分期免息</div>
          <div class="price_line">
            <div class="price"><span>¥</span>{{item.salePrice}}</div>
            <div class="input-number">
              <div class="btn minus" :class="[item.qty === 1 ? 'disable' : '']" @click="numBtnClick('minus',index,item.skuId)"></div>
              <div class="num">{{item.qty}}</div>
              <div class="btn add" :class="[item.qty === 20 ? 'disable' : '']" @click="numBtnClick('add',index,item.skuId)"></div>
            </div>
          </div>
          <div class="limit">限购20件</div>
          <div class="service">
            <div class="title">服务</div>
            <div class="desc">
              <div>碎屏险</div>
              <div>延长保</div>
            </div>
            <div class="more"></div>
          </div>
          <div class="service gift">
            <div class="title">配件</div>
            <div class="subItems">
              <div class="item" v-for="sitem in item.subItems" :key="sitem.itemCode">
                <img :src="'https://res.vmallres.com/pimages' + sitem.sbom.photoPath + '428_428_' + sitem.sbom.photoName" />
                <div class="name">{{sitem.itemName}}</div>
                <div class="num">x{{sitem.qty}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="total">
        <div class="checkAll">
          <CheckBox :selected="isAll" @checkBoxChange="checkBoxChange($event,'all')" />
          <div class="name">全选</div>
        </div>
        <div v-if="!isEdit" class="topay">
          <div class="totalPrice">
            <div class="name">总计：</div>
            <div class="price">{{cartInfo.cashPay}}</div>
          </div>
          <div class="payBtn">结算({{cartInfo.totalNumber}})</div>
        </div>
        <div v-else class="delBtn" @click="delBtnClick">删除</div>
      </div>
    </div>
    <Tarbar :activeIndex=3 :cartNum="cartInfo.originalTotalNumber"></Tarbar>
  </div>
</template>

<script>
import Tarbar from '../../common/tarbar'
import CheckBox from '../../common/checkBox'
export default {
  name: 'cart',
  components: {
    Tarbar,
    CheckBox
  },
  data () {
    return {
      products: [],  // 购物车空白 推荐商品
      cartInfo: {},  // 购物车商品
      isAll: false,  // 全选状态
      isEdit: false, // 编辑状态
      skuIds: [],    // 选择的商品的skuId
    }
  },
  methods: {
    // 热销推荐数据
    async getProducts() {
      let data = await this.$http.get('../../../../static/mock/queryEptCartRecommendPrds.json')
      this.products = data.products;
    },
    // 购物车商品数据
    async getGoodsList() {
      let data = await this.$http.get('../../../../static/mock/queryCart.json')
      this.cartInfo = data.cartInfo;
    },
    // 编辑按钮点击事件
    editBtnclick(){
      this.isEdit = !this.isEdit;
      let cartInfo = this.cartInfo;
      let len = cartInfo.itemInfos.length;
      for (let i = 0; i < len; i++) {
        cartInfo.itemInfos[i].selected = this.isEdit ? false : true;
      }
      this.cartInfo = cartInfo;
    },
    // checkBoxChange 值改变事件
    checkBoxChange(e,type,index,skuId){
      let cartInfo = this.cartInfo;
      switch (type) {
        case 'goods':
          cartInfo.itemInfos[index].selected = !e;
          this.cartInfo = cartInfo;
          break;
        case 'all':
          this.isAll = !this.isAll;
          let len = cartInfo.itemInfos.length;
          for (let i = 0; i < len; i++) {
            cartInfo.itemInfos[i].selected = this.isAll; 
          }
          this.cartInfo = cartInfo;
          break;
        default:
          break;
      }
    },
    // 商品加减按钮点击事件
    numBtnClick(type,index,skuId){
      let cartInfo = this.cartInfo;
      switch (type) {
        case 'minus':
          if (cartInfo.itemInfos[index].qty === 1) {
            return
          }
          cartInfo.itemInfos[index].qty = cartInfo.itemInfos[index].qty - 1;
          this.cartInfo = cartInfo;
          break;
        case 'add':
          if (cartInfo.itemInfos[index].qty === 20) {
            return
          }
          cartInfo.itemInfos[index].qty = cartInfo.itemInfos[index].qty + 1;
          this.cartInfo = cartInfo;  
          break;
        default:
          break;
      }
    },
    // 删除按钮点击事件
    delBtnClick(){
      console.log('skuIds = ',this.skuIds);
    },
    // 处理商品价格和数量
    makeTotal(){
      let itemInfos = this.cartInfo.itemInfos;
      let totalObj = {
        totalNumber: 0,
        cashPay: 0,
        originalTotalNumber: 0
      };
      let count = 0;
      let skuIds = [];
      itemInfos.forEach(function(item) {
        if (item.selected) {
          count ++;
          totalObj.totalNumber = totalObj.totalNumber + item.qty;
          totalObj.cashPay = totalObj.cashPay + item.salePrice * item.qty;
          skuIds.push(item.skuId)
        }
        totalObj.originalTotalNumber = totalObj.originalTotalNumber + item.qty;
      });

      this.isAll = count === itemInfos.length ? true : false;

      this.skuIds = skuIds;

      this.cartInfo.totalNumber = totalObj.totalNumber;
      this.cartInfo.cashPay = totalObj.cashPay;
      this.cartInfo.originalTotalNumber = totalObj.originalTotalNumber;
    }
  },
  watch: {
    cartInfo: {   // 监听 cartInfo 的变化
      handler(curVal,oldVal){
        this.makeTotal()
      },
      deep: true, 
    },
  },
  mounted (){
    this.getProducts()
    this.getGoodsList();
  }
}
</script>

<style scoped lang="scss">
.cart{
  background-color: #f9f9f9;
  margin-bottom: 100px;
  .heaer{
    color: #191919;
    font-size: 36px;
    height: 82px;
    line-height: 82px;
    position: relative;
    span{
      color: #888;
      position: absolute;
      right: 30px;
      font-size: 30px;
      padding: 0 20px;
    }
  }
  .fixedTop{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: white;
    z-index: 100;
  }
  .noGoods{
    margin-top: 82px;
    .emptyArea{
      padding: 60px 0px 40px 0px;
      text-align: center;
      .emptyImg{
        width: 208px;
        height: 208px;
      }
      .emptyText{
        color: #999;
        padding: 10px 0 20px 0;
      }
      .goBuyBtn{
        display: inline-table;
        width: 186px;
        height: 60px;
        line-height: 60px;
        font-size: 26px;
        color: rgb(102, 102, 102);
        border: 1px solid rgba(51,51,51,.3);
        border-radius: 30px;
      }
    }
    .hotArea{
      .title{
        color: #333333;
        font-weight: bold;
        height: 106px;
        line-height: 106px;
        font-size: 36px;
      }
      .goodsList{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
        .item{
          width: 360px;
          height: 398px;
          background-color: white;
          margin: 0 5px 16px 5px;
          padding: 30px 0;
          border-radius: 16px;
          position: relative;
          .addToCart{
            position: absolute;
            top: 10px;
            right: 10px;
            width: 50px;
            height: 50px;
          }
          .mainImg{
            width: 270px;
            height: 270px;
          }
          .name{
            color: #333;
            font-size: 26px;
            height: 70px;
            line-height: 70px;
          }
          .price{
            color: #ca141d;
            font-weight: bold;
          }
        }
      }
    }
  }
  .hasGoods{
    padding: 16px 25px;
    margin-top: 82px;
    margin-bottom: 200px;
    .goodsItem{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      background-color: white;
      padding: 48px 0 50px 0;
      margin-bottom: 16px;
      border-radius: 20px;
      .left{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding-left: 20px;
        padding-right: 10px;
        .checkBox{
          margin-top: 60px;
          margin-right: 6px;
        }
        img{
          width: 166px;
          height: 166px;
        }
      }
      .right{
        text-align: left;
        padding-right: 16px;
        .name{
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: #333;
          font-size: 30px;
        }
        .sku{
          margin-top: 14px;
          word-break: break-all;
          color: #666;
          font-size: 24px;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          span{
            &:last-of-type{
              label{
                display: none;
              }
            }
          }
        }
        .promotion{
          margin-top: 20px;
          color: #ef5a62;
          font-size: 24px;
          text-align: center;
          width: 104px;
          padding: 0 14px;
          height: 28px;
          line-height: 31px;
          -webkit-border-radius: 0.45rem;
          border-radius: 0.45rem;
          border: solid 1px rgba(202, 20, 29, 0.3);
        }
        .price_line{
          margin-top: 20px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: nowrap;
          height: 50px;
          .price{
            color: #ca141d;
            font-weight: bold;
            font-size: 36px;
            span{
              font-size: 28px;
            }
          }
          .input-number{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            .num{
              width: 70px;
              text-align: center;
              line-height: 50px;
            }
            .btn{
              width: 50px;
              height: 50px;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: 0 0;
            }
            .minus{
              background-image: url(../../../../static/images/input_number_minus.png);
            }
            .add{
              background-image: url(../../../../static/images/input_number_add.png);
            }
            .disable{
              background-position: -50px 0;
            }
          }
        }
        .limit{
          color: #ca141d;
          margin-top: 10px;
          text-align: right;
          font-size: 24px;
        }
        .service{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: nowrap;
          margin-top: 12px;
          font-size: 24px;
          position: relative;
          .title{
            color: #666;
            width: 80px;
            text-align: left;
            line-height: 44px;
          }
          .desc{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            color: #333333;
            div{
              height: 40px;
              line-height: 44px;
              border: solid 0.5px #b2b3b4;
              border-radius: 4px;
              padding: 0 12px;
              &:not(:last-of-type){
                margin-right: 10px;
              }
            }
          }
          .more{
            background-image: url(../../../../static/images/dian3.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0 0;
            width: 50px;
            height: 50px;
            position: absolute;
            right: 10px;
          }
        }
        .gift{
          .subItems{
            .item{
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              flex-wrap: nowrap;
              height: 36px;
              line-height: 36px;
              margin-bottom: 10px;
              img{
                width: 36px;
                height: 36px;
                margin-right: 10px;
              }
              .name{
                font-size: 24px;
                color: #333;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                vertical-align: middle;
                word-break: break-all;
                line-height: normal;
              }
              .num{
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
    .total{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 100px;
      height: 100px;
      line-height: 100px;
      background-color: white;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      .checkAll,.topay,.totalPrice{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
      }
      .checkAll{
        .checkBox{
          margin-top: 30px;
          margin-left: 30px;
          margin-right: 20px;
        }
        .name{
          color: #999;
          font-size: 28px;
        }
      }
      .topay{
        .totalPrice{
          color: #333;
          font-size: 32px;
          .price{
            color: #ca141d;  
            font-weight: bold;
            font-size: 38px;
          }
        }
        .payBtn{
          background-image: linear-gradient(90deg,#e43e2d,#ca141d);
          color: #fff;
          min-width: 186px;
          height: 76px;
          line-height: 76px;
          text-align: center;
          border-radius: 38px;
          margin: 12px 20px 0 20px;
        }
      }
      .delBtn{
        border: 1px solid rgba(51,51,51,.3);
        color: #333;
        min-width: 186px;
        height: 76px;
        line-height: 76px;
        text-align: center;
        border-radius: 38px;
        margin: 12px 20px 0 20px;
      }
    }
  }
}
</style>
